import { DatePicker } from 'antd-mobile';
import { useState } from 'react';

export default function C001() {
	const [visible, setvisible] = useState(false);
	const [value, setvalue] = useState('日期选择');
	const [visible1, setvisible1] = useState(false);
	const [value1, setvalue1] = useState('时间选择');
	return <>
		<div>
			<span>活动开始时间</span>
			<span className='dt' onClick={() => {
				setvisible(true);
			}}>{value}</span>
			<span className='dt' onClick={() => {
				setvisible1(true);
			}}>{value1}</span>
			<DatePicker
				title='时间选择'
				visible={visible}
				onClose={() => {
					setvisible(false);
				}}
				onConfirm={(val) => {
					console.debug(val);
					setvalue(val.toLocaleDateString());
				}}
			/>
			<DatePicker
				title='时间选择'
				visible={visible}
				onClose={() => {
					setvisible(false);
				}}
				onConfirm={(val) => {
					console.debug(val);
					setvalue(val.toLocaleDateString());
				}}
			/>
			<DatePicker
				visible={visible1}
				onClose={() => {
					setvisible1(false);
				}}
				precision='minute'
				onConfirm={val => {
					setvalue1(val.toLocaleTimeString());
				}}
			/>
		</div>
		<style jsx>{`
.dt{
background: #FFFFFF;
border: 1px solid #D9D9D9;
box-sizing: border-box;
border-radius: 2px;
padding: 0.2rem 2rem;
/* Body/regular */

font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 22px;
/* identical to box height, or 157% */


/* Character / Primary .85 */

color: rgba(0, 0, 0, 0.85);

opacity: 0.4;
}
`}</style>
	</>;
}
